<template>
	<view class="container">
		<view class="charts-box">
			<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
		</view>
		<view class="charts-box">
			<qiun-data-charts type="arcbar" :opts="arcbar.opts" :chartData="arcbar.chartData" />
		</view>
		<view class="charts-box">
			<qiun-data-charts type="area" :opts="area.opts" :chartData="area.chartData" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				area: {
					chartData: {
						"categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
						"series": [
							{
							//"labelShow":false,
							"name": "成交量A",
							"data": [8, 25, 37, 4, 20],
							"color": '#0EE2F8'
						}, {
							"name": "成交量B",
							"data": [40, 65, 100, 44, 68],
							"color": '#9A60B4'
						}, {
							"name": "成交量C",
							"data": [80, 95, 150, 112, 132]
						}]
					},
					opts: {
						// xAxis: {
						// 	format: 'xAxisDemo2'
						// },
						yAxis: {
							data: [
								
								{
									//axisLine:false,
									min: 0,
									max: 200
								}
							]
						},
						//yAxis:{data:[{min:0,max:80}]}},
						extra: {
							area: {
								type: 'curve',
								addLine: true,
								gradient: true,
								opacity: 1
							}
						}
					},

				},
				arcbar: {
					chartData: {
						"series": [ {
							"name": "二班",
							"data": 0.9,

							"width": 20,
						}]
					},
					opts: {
						title: {
							name: '圆环图'
						},
						subtitle: {
							name: '30%'
						},
						//title:'圆环图',
						extra: {
							arcbar: {
								gap: 0,
								type: 'circle',
								startAngle: 1.8,
								//linearType: 'custom',
								//backgroundColor:'#F6F6F6'
								//customColor: ['#F56C6C', '#67C23B']
							},

						}
					}
				},
				chartData: {},
				opts: {
					legend: {
						show: true,
						position: 'left'
					},
					extra: {
						column: {
							linearType: 'custom',
							linearOpacity: 0.5,
							barBorderCircle: true,
						}
					}
				}
			}
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					let res = {
						categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
						series: [{
								name: "目标值",
								data: [35, 36, 31, 33, 13, 34]
							},
							{
								name: "完成量",
								data: [18, 27, 21, 24, 6, 28]
							}
						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		//background: yellowgreen;
		padding: 20px;
		font-size: 14px;
		line-height: 24px;

		.charts-box {
			width: 100%;
			height: 300px;
		}
	}
</style>